<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :root {
    --hue: 223;
    --bg: hsl(var(--hue), 10%, 90%);
    --fg: hsl(var(--hue), 10%, 10%);
    --primary: hsl(var(--hue), 90%, 55%);
    font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320));
  }

  body,
  button {
    --transDur: 0.3s;
    color: var(--fg);
    font: 1em/1.5 sans-serif;
    transition:
      background-color var(--transDur),
      color var(--transDur);
  }

  body {
    background-color: var(--bg);
    height: 100vh;
    display: grid;
    place-items: center;
  }

  button {
    background-color: #0000;
    -webkit-tap-highlight-color: #0000;
  }

  button:focus {
    outline: transparent;
  }

  button:not(:disabled):focus,
  button:not(:disabled):hover {
    color: var(--primary);
  }

  .logo {
    width: 13.2em;
    height: 2.4em;
  }

  .logo__letter {
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    animation-fill-mode: forwards;
    stroke: currentColor;
  }

  .logo__letter--M {
    stroke-dasharray: 125 125;
  }

  .logo__letter--u1 {
    stroke-dasharray: 53 53;
  }

  .logo__letter--u2 {
    stroke-dasharray: 22 22;
  }

  .logo__letter--c {
    stroke-dasharray: 55 55;
  }

  .logo__letter--h1 {
    stroke-dasharray: 33 33;
  }

  .logo__letter--h2 {
    stroke-dasharray: 40 40;
  }

  .logo__letter--S {
    stroke-dasharray: 77 77;
  }

  .logo__letter--t1 {
    stroke-dasharray: 12 12;
  }

  .logo__letter--t2 {
    stroke-dasharray: 31 31;
  }

  .logo__letter--r1 {
    stroke-dasharray: 31 31;
  }

  .logo__letter--r2 {
    stroke-dasharray: 15 15;
  }

  .logo__letter--o {
    stroke-dasharray: 64 64;
  }

  .logo__letter--k1 {
    stroke-dasharray: 32 32;
  }

  .logo__letter--k2 {
    stroke-dasharray: 31 31;
  }

  .logo__letter--e {
    stroke-dasharray: 76 76;
  }

  .logo--running .logo__letter--M {
    animation-name: M;
    stroke-dashoffset: 125;
  }

  .logo--running .logo__letter--u1 {
    animation-name: u1;
    stroke-dashoffset: -53;
  }

  .logo--running .logo__letter--u2 {
    animation-name: u2;
    stroke-dashoffset: 22;
  }

  .logo--running .logo__letter--c {
    animation-name: c;
    stroke-dashoffset: 55;
  }

  .logo--running .logo__letter--h1 {
    animation-name: h1;
    stroke-dashoffset: 33;
  }

  .logo--running .logo__letter--h2 {
    animation-name: h2;
    stroke-dashoffset: -40;
  }

  .logo--running .logo__letter--S {
    animation-name: S;
    stroke-dashoffset: 77;
  }

  .logo--running .logo__letter--t1 {
    animation-name: t1;
    stroke-dashoffset: 12;
  }

  .logo--running .logo__letter--t2 {
    animation-name: t2;
    stroke-dashoffset: 31;
  }

  .logo--running .logo__letter--r1 {
    animation-name: r1;
    stroke-dashoffset: 31;
  }

  .logo--running .logo__letter--r2 {
    animation-name: r2;
    stroke-dashoffset: 15;
  }

  .logo--running .logo__letter--o {
    animation-name: o;
    stroke-dashoffset: 64;
  }

  .logo--running .logo__letter--k1 {
    animation-name: k1;
    stroke-dashoffset: 32;
  }

  .logo--running .logo__letter--k2 {
    animation-name: k2;
    stroke-dashoffset: 31;
  }

  .logo--running .logo__letter--e {
    animation-name: e;
    stroke-dashoffset: 76;
  }

  .logo--running .logo__group:nth-child(2) .logo__letter {
    animation-delay: 0.33s;
  }

  .logo--running .logo__group:nth-child(3) .logo__letter {
    animation-delay: 0.67s;
  }

  @supports selector(:focus-visible) {
    button:not(:disabled):focus {
      color: currentColor;
    }

    button:not(:disabled):focus-visible,
    button:not(:disabled):hover {
      color: var(--primary);
    }
  }

  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: hsl(var(--hue), 10%, 10%);
      --fg: hsl(var(--hue), 10%, 90%);
      --primary: hsl(var(--hue), 90%, 65%);
    }
  }

  /* Animations */
  @keyframes M {
    from {
      stroke-dashoffset: 125;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes u1 {
    from {
      stroke-dashoffset: -53;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes u2 {
    from {
      stroke-dashoffset: 22;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes c {
    from {
      stroke-dashoffset: 55;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes h1 {
    from {
      stroke-dashoffset: 33;
    }

    50%,
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes h2 {

    from,
    50% {
      stroke-dashoffset: -40;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes S {
    from {
      stroke-dashoffset: 77;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes t1 {

    from,
    50% {
      stroke-dashoffset: 12;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes t2 {
    from {
      stroke-dashoffset: 31;
    }

    50%,
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes r1 {
    from {
      stroke-dashoffset: 31;
    }

    80%,
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes r2 {

    from,
    50% {
      stroke-dashoffset: 15;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes o {
    from {
      stroke-dashoffset: 64;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes k1 {
    from {
      stroke-dashoffset: 32;
    }

    50%,
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes k2 {

    from,
    50% {
      stroke-dashoffset: 31;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes e {
    from {
      stroke-dashoffset: 76;
    }

    to {
      stroke-dashoffset: 0;
    }
  }
</style>

<body>
  <button id="logo" type="button">
    <svg class="logo" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
      width="264px" height="48px" viewBox="0 0 264 48" role="img" aria-label="MuchStroke">
      <g class="logo__group" opacity="0.2">
        <path class="logo__letter logo__letter--M" d="M5.131,39V7l14.45,25.832a1,1,0,0,0,1.755-.036L35.131,7V39" />
        <path class="logo__letter logo__letter--u1"
          d="M45.208,17.271V29s0,9.664,8.345,9.664C62.936,38.664,63,29,63,29V17.271" />
        <line class="logo__letter logo__letter--u2" x1="63" y1="17.578" x2="63" y2="39" />
        <path class="logo__letter logo__letter--c"
          d="M91.359,22.7s-1.7-5.28-9.537-5.279c-6.471,0-9.669,5.619-9.669,10.473,0,6.1,3.027,11.109,9.575,11.109,7.246,0,9.631-4.212,9.631-4.212" />
        <line class="logo__letter logo__letter--h1" x1="101" y1="7.337" x2="101" y2="39.352" />
        <path class="logo__letter logo__letter--h2" d="M118,39.045,117.839,25s.161-7.652-8.339-7.652S101,25,101,25" />
        <path class="logo__letter logo__letter--S"
          d="M145.172,14.012s-1.362-5.62-8.259-5.62c-6.386,0-8.536,4.088-8.6,7.493-.171,9.026,18.051,4.939,18.051,16.008,0,3.321-1.618,7.152-9.452,7.152-7.918,0-9.451-7.663-9.451-7.663" />
        <line class="logo__letter logo__letter--t1" x1="154" y1="18.236" x2="165.778" y2="18.236" />
        <path class="logo__letter logo__letter--t2"
          d="M158.682,12.763l-.113,21a5.451,5.451,0,0,0,1.334,3.661c1.308,1.229,5.25,1.193,5.25,1.193" />
        <line class="logo__letter logo__letter--r1" x1="174.293" y1="19" x2="174.293" y2="38.927" />
        <path class="logo__letter logo__letter--r2" d="M174.293,27.38c0-8.685,9.962-9.111,9.962-9.111" />
        <ellipse class="logo__letter logo__letter--o" cx="200" cy="28.8" rx="10.5" ry="9.912"
          transform="rotate(-90 200 28.8)" />
        <line class="logo__letter logo__letter--k1" x1="219.5" y1="7.3" x2="219.5" y2="39.3" />
        <polyline class="logo__letter logo__letter--k2" points="233.6 16.442 223.6 26.966 233.6 39.173" />
        <path class="logo__letter logo__letter--e"
          d="M243.348,27.482l16.689-.019s-.511-10.292-9.286-10.292c-6.982,0-9.969,5.519-9.958,10.292.009,3.893,1.021,11.364,9.281,11.366,8.174,0,8.685-4.969,8.685-4.969" />
      </g>
      <g class="logo__group" opacity="0.2">
        <path class="logo__letter logo__letter--M" d="M5.131,39V7l14.45,25.832a1,1,0,0,0,1.755-.036L35.131,7V39" />
        <path class="logo__letter logo__letter--u1"
          d="M45.208,17.271V29s0,9.664,8.345,9.664C62.936,38.664,63,29,63,29V17.271" />
        <line class="logo__letter logo__letter--u2" x1="63" y1="17.578" x2="63" y2="39" />
        <path class="logo__letter logo__letter--c"
          d="M91.359,22.7s-1.7-5.28-9.537-5.279c-6.471,0-9.669,5.619-9.669,10.473,0,6.1,3.027,11.109,9.575,11.109,7.246,0,9.631-4.212,9.631-4.212" />
        <line class="logo__letter logo__letter--h1" x1="101" y1="7.337" x2="101" y2="39.352" />
        <path class="logo__letter logo__letter--h2" d="M118,39.045,117.839,25s.161-7.652-8.339-7.652S101,25,101,25" />
        <path class="logo__letter logo__letter--S"
          d="M145.172,14.012s-1.362-5.62-8.259-5.62c-6.386,0-8.536,4.088-8.6,7.493-.171,9.026,18.051,4.939,18.051,16.008,0,3.321-1.618,7.152-9.452,7.152-7.918,0-9.451-7.663-9.451-7.663" />
        <line class="logo__letter logo__letter--t1" x1="154" y1="18.236" x2="165.778" y2="18.236" />
        <path class="logo__letter logo__letter--t2"
          d="M158.682,12.763l-.113,21a5.451,5.451,0,0,0,1.334,3.661c1.308,1.229,5.25,1.193,5.25,1.193" />
        <line class="logo__letter logo__letter--r1" x1="174.293" y1="19" x2="174.293" y2="38.927" />
        <path class="logo__letter logo__letter--r2" d="M174.293,27.38c0-8.685,9.962-9.111,9.962-9.111" />
        <ellipse class="logo__letter logo__letter--o" cx="200" cy="28.8" rx="10.5" ry="9.912"
          transform="rotate(-90 200 28.8)" />
        <line class="logo__letter logo__letter--k1" x1="219.5" y1="7.3" x2="219.5" y2="39.3" />
        <polyline class="logo__letter logo__letter--k2" points="233.6 16.442 223.6 26.966 233.6 39.173" />
        <path class="logo__letter logo__letter--e"
          d="M243.348,27.482l16.689-.019s-.511-10.292-9.286-10.292c-6.982,0-9.969,5.519-9.958,10.292.009,3.893,1.021,11.364,9.281,11.366,8.174,0,8.685-4.969,8.685-4.969" />
      </g>
      <g class="logo__group">
        <path data-anim class="logo__letter logo__letter--M"
          d="M5.131,39V7l14.45,25.832a1,1,0,0,0,1.755-.036L35.131,7V39" />
        <path class="logo__letter logo__letter--u1"
          d="M45.208,17.271V29s0,9.664,8.345,9.664C62.936,38.664,63,29,63,29V17.271" />
        <line class="logo__letter logo__letter--u2" x1="63" y1="17.578" x2="63" y2="39" />
        <path class="logo__letter logo__letter--c"
          d="M91.359,22.7s-1.7-5.28-9.537-5.279c-6.471,0-9.669,5.619-9.669,10.473,0,6.1,3.027,11.109,9.575,11.109,7.246,0,9.631-4.212,9.631-4.212" />
        <line class="logo__letter logo__letter--h1" x1="101" y1="7.337" x2="101" y2="39.352" />
        <path class="logo__letter logo__letter--h2" d="M118,39.045,117.839,25s.161-7.652-8.339-7.652S101,25,101,25" />
        <path class="logo__letter logo__letter--S"
          d="M145.172,14.012s-1.362-5.62-8.259-5.62c-6.386,0-8.536,4.088-8.6,7.493-.171,9.026,18.051,4.939,18.051,16.008,0,3.321-1.618,7.152-9.452,7.152-7.918,0-9.451-7.663-9.451-7.663" />
        <line class="logo__letter logo__letter--t1" x1="154" y1="18.236" x2="165.778" y2="18.236" />
        <path class="logo__letter logo__letter--t2"
          d="M158.682,12.763l-.113,21a5.451,5.451,0,0,0,1.334,3.661c1.308,1.229,5.25,1.193,5.25,1.193" />
        <line class="logo__letter logo__letter--r1" x1="174.293" y1="19" x2="174.293" y2="38.927" />
        <path class="logo__letter logo__letter--r2" d="M174.293,27.38c0-8.685,9.962-9.111,9.962-9.111" />
        <ellipse class="logo__letter logo__letter--o" cx="200" cy="28.8" rx="10.5" ry="9.912"
          transform="rotate(-90 200 28.8)" />
        <line class="logo__letter logo__letter--k1" x1="219.5" y1="7.3" x2="219.5" y2="39.3" />
        <polyline class="logo__letter logo__letter--k2" points="233.6 16.442 223.6 26.966 233.6 39.173" />
        <path class="logo__letter logo__letter--e"
          d="M243.348,27.482l16.689-.019s-.511-10.292-9.286-10.292c-6.982,0-9.969,5.519-9.958,10.292.009,3.893,1.021,11.364,9.281,11.366,8.174,0,8.685-4.969,8.685-4.969" />
      </g>
    </svg>
  </button>
</body>

<script>
  window.addEventListener("DOMContentLoaded", () => {
    const ms = new LogoAnimation("#logo", ".logo");
  });

  class LogoAnimation {
    constructor(buttonQS, svgQS) {
      this.button = document.querySelector(buttonQS);
      this.svg = document.querySelector(svgQS);
      this.lastAnimPart = this.svg?.querySelector(`${svgQS} [data-anim]`);
      this.playClass = "logo--running";

      this.button?.addEventListener("click", this.replay.bind(this));
      this.lastAnimPart?.addEventListener("animationend", this.stop.bind(this));

      this.replay();
    }
    replay() {
      if (!this.button.disabled) {
        this.button.disabled = true;
        this.svg?.classList.add(this.playClass);
      }
    }
    stop() {
      this.button.disabled = false;
      this.svg?.classList.remove(this.playClass);
    }
  }
</script>

</html>